<template>
	<view :data-theme="theme()" :class="'order-datail pb100' + theme()" v-if="!loadding">
		<!--详情状态-->
		<view class="order-state d-s-c">
			<view class="icon-box">
				<span v-if="detail.stateText == '已付款,待发货'" class="icon iconfont icon-icon"></span>
				<span v-if="detail.stateText == '待付款'" class="icon iconfont icon-icon"></span>
				<span v-if="detail.stateText == '待付尾款'" class="icon iconfont icon-icon"></span>
				<span v-if="detail.stateText == '已发货,待收货'" class="icon iconfont icon-daishouhuo"></span>
				<span v-if="detail.stateText == '已完成'" class="icon iconfont icon-xuanze"></span>
				<span v-if="detail.stateText == '已取消'" class="icon iconfont icon-gantanhao"></span>

			</view>
			<view class="state-cont flex-1" v-if="detail.orderType == 7 || detail.orderType == 8">
				<view class="state-txt d-b-c">
					<text class="desc f34">{{ detail.groupStatusText }}</text>
				</view>
			</view>
			<view v-else class="state-cont flex-1">
				<view class="state-txt d-b-c">
					<text class="desc f34">{{ detail.stateText }}</text>
				</view>
				<view class="status-price pt10" v-if="detail.status == 10 || detail.status == 30">
					应付金额：¥ {{ detail.status == 10 ? detail.depositPrice : detail.status == 30 ? detail.finalPrice : '' }}

				</view>
				<!-- <view class="countdown-datetime" v-if="detail.payEndTimeText">
					<text>剩{{ detail.payEndTimeText }}自动关闭</text>
				</view> -->
			</view>

			<view class="dot-bg"></view>
		</view>

		<!--物流地址-->
		<view class="order-express p30 d-s-c" v-if="detail.deliveryType == 10">
			<view class="icon-box">
				<image style="width: 42rpx; height: 42rpx" src="../../static/icon/address_icon.png" mode=""></image>
			</view>
			<view class="cont-text flex-1 o-h ml20 f30">
				<view class="express-text f32">
					{{ detail.address.name }}
					<text class="f26 gray9">{{ detail.address.phone }}</text>
				</view>
				<view class="gray3 f26 pt10">
					{{ detail.address.region.province }}{{ detail.address.region.city
					}}{{ detail.address.region.region }}{{ detail.address.detail }}
				</view>
			</view>
			<view class="icon iconfont icon-jiantou"></view>
		</view>
		<!-- 上门自提：自提门店 -->
		<view class="order-express p30 d-s-s" v-if="detail.deliveryType == 20">
			<view class="flow-delivery__title m-top20"><span class="icon iconfont icon-dizhi1">自提门店</span></view>
			<view class="cont-text flex-1 o-h ml20 f30">
				<view class="express-text">
					{{ extractStore.storeName }} {{ extractStore.phone }}
					<view class="f24 gray9 pt10">{{ extractStore.province }} {{ extractStore.city }}
						{{ extractStore.region }} {{ extractStore.address }}
					</view>
				</view>
			</view>
		</view>

		<!-- 物流信息 -->
		<!-- <view
      class="group bg-white"
      v-if="detail.deliveryType == 10 && detail.deliveryStatus == 20"
      @click="gotoExpress(detail.orderId)"
    >
      <view class="d-b-c">
        <view class="f28">
          <view class="p-20-0">
            <text class="gray9">物流公司：</text>
            <text>{{ detail.express.expressName }}</text>
          </view>
          <view class="p-20-0">
            <text class="gray9">物流单号：</text>
            <text>{{ detail.expressNo }}</text>
          </view>
        </view>
        <view><text class="icon iconfont icon-jiantou"></text></view>
      </view>
    </view> -->

		<!--购物列表-->
		<view class="shops group bg-white">
			<view class="list">
				<view class="one-product p-20-0" v-for="(item, index) in detail.product" :key="index">
					<view class="d-s-c">
						<view class="cover">
							<image :src="item.productImage" mode="aspectFit"></image>
						</view>
						<view class="flex-1">
							<view class="p-0-30 text-ellipsis-2 gray3 f30" style="display: flex;justify-content: space-between;">
								<view>
									{{item.productName}}
								</view>
								
								<view class="tag-view" v-if="item.isGift">
									<uni-tag :circle='true' text="赠品" type="royal" />
								</view>
								<view class="tag-view" style="position: absolute;left: -16px;top: -5px;" v-else>
									<uni-tag size="mini" :mark="true"
										:text="item.orderProductType == '10'?'销售':item.orderProductType == '20'?'赠品':item.orderProductType == '30'?'赔付':''"
										:type="item.orderProductType == '10'?'primary':item.orderProductType == '20'?'warning':item.orderProductType == '30'?'error':''" />
								</view>
							</view>
							<view class="pt10 p-0-30 gray6 f24">{{ item.productAttr }}</view>
							<!-- 单个商品的定金 尾款 -->
							<view class="pt10 p-0-30 gray6 f24">
								定金:￥{{ item.depositPrice }} &nbsp;
								尾款:￥{{ item.isGift == 0?item.finalPrice:'0.00' }}
							</view>

							<view class="pt10 p-0-30 d-b-c">
								<template v-if="item.isUserGrade != 1">
									<view class="price f22">
										¥
										<text class="f40">{{ item.productPrice }}</text>
									</view>
								</template>
								<template v-else>
									<view class="text-l-t f22">
										¥
										<text class="f40">{{ item.productPrice }}</text>
									</view>
								</template>
								<view class="f24 gray9">x{{ item.totalNum }}</view>
							</view>
							<view class="mt10 tr f28" v-if="item.isUserGrade == 1">
								<text class="red">会员折扣价：</text>
								<text class="red">{{ item.gradeProductPrice }}</text>
							</view>
						</view>
					</view>
					<view v-if="item.tableId > 0 && item.tableRecordId > 0" class="supplement-box">
						<view class="p20" v-for="(table_item, table_index) in item.tableData" :key="table_index">
							<view class="d-s-s" v-if="table_item.type == 'image'">
								<text class="gray6 mr15">{{ table_item.name }}:</text>
								<image style="width: 80rpx; height: 80rpx" @click="yulan(table_item.value, 0)"
									:src="table_item.value" mode="aspectFill"></image>
							</view>
							<template v-else>
								<text class="gray6 mr15">{{ table_item.name }}:</text><text>{{ table_item.value
									}}</text>
							</template>
						</view>
					</view>
					<view class="pt10 d-e-c" v-if="false">
						<!-- 申请售后 -->
						<view class="m-top20 dis-flex flex-x-end">
							<text v-if="item.refund" class="red">{{ item.refundState }}</text>
							<view v-else-if="detail.isAllowRefund" @click="onApplyRefund(item.orderProductId)"><button
									type="default">申请售后</button></view>
						</view>
					</view>
					<view class="pt10 d-e-c" v-if="item.tableId > 0 && item.tableRecordId == 0">
						<!-- 补充表单 -->
						<view class="m-top20 dis-flex flex-x-end">
							<view @click="onSaveTable(item.tableId, item.orderProductId)"><button
									class="theme-btn">补充信息</button></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--订单信息-->
		<view class="group bg-white f26">
			<view class="p-20-0">
				<text class="">订单编号：</text>
				<text>{{ detail.orderNo }}</text>
			</view>
			<view class="p-20-0">
				<text class="">下单时间：</text>
				<text>{{ detail.createTime }}</text>
			</view>
	
			<view class="p-20-0">
				<text class="">配送方式：</text>
				<text>上门自提</text>
			</view>
			<view class="p-20-0" v-if="
				detail.deliveryType == 30 &&
				detail.orderStatus == 30 &&
				detail.virtualContent != ''
			">
				<text class="">发货信息：</text>
				<text>{{ detail.virtualContent }}</text>
			</view>
			<view class="p-20-0">
				<text class="">备注：</text>
				<text>{{ detail.buyerRemark }}</text>
			</view>
			<view class="p-20-0" v-if="detail.orderStatus == 20 && detail.cancelRemark != ''">
				<text class="">商家备注：</text>
				<text>{{ detail.cancelRemark }}</text>
			</view>
			<view v-if="service_open && detail.serviceUserId != 0" class="p-20-0 kefu" @click="tochat">
				<text class="icon iconfont icon-kefu2"></text>
				<text class="">联系卖家</text>
			</view>
		</view>
		<view class="wrapper" v-if="customForm && customForm.length">
			<view class="item acea-row row-between" v-for="(item, index) in customForm" :key="index">
				<view class="upload" v-if="item.label == 'img'">
					<view class="diy-from-title">{{ item.title }}：</view>
					<view class="pictrue" v-for="(img, index) in item.value" :key="index">
						<image :src="img.filePath"></image>
					</view>
				</view>
				<view v-if="item.label !== 'img'" class="diy-from-title">{{ item.title }}：</view>
				<view v-if="item.label !== 'img'" class="conter">{{ item.value }}</view>
			</view>
			<view class="copy-text" @click="copyText()"> 复制 </view>
		</view>
		<view class="group bg-white f26"
			v-if="(detail.orderType == 7 || detail.orderType == 8) && detail.groupStatus != 20 ? false : true">
			<view class="p-20-0 d-b-c">
				<text class="">订单金额：</text>
				<text>￥{{ detail.totalPrice }}</text>
			</view>
			<view class="p-20-0 d-b-c">
				<text class="">优惠后订单金额：</text>
				<text>￥{{ detail.orderPrice }}</text>
			</view>
			<view class="p-20-0 d-b-c">
				<text class="">优惠券优惠金额：</text>
				<text>￥{{ detail.couponMoney }}</text>
			</view>
			<view class="p-20-0 d-b-c">
				<text class="">积分优惠金额：</text>
				<text>￥{{ detail.pointsMoney }}</text>
			</view>
			<view class="p-20-0 d-b-c">
				<text class="">定金金额：</text>
				<text>￥{{ detail.depositPrice }}</text>
			</view>
			<view class="p-20-0 d-b-c">
				<text class="">尾款金额：</text>
				<text>￥{{ detail.finalPrice }}</text>
			</view>
			<view class="p-20-0 d-b-c">
				<text class="">运费：</text>
				<text>￥{{ detail.expressPrice }}</text>
			</view>
			<view v-if="detail.packPrice && detail.packPrice != '0.00'" class="p-20-0 d-b-c">
				<text class="">包装费：</text>
				<text>￥{{ detail.packPrice }}</text>
			</view>

			<view class="p-20-0 d-b-c" v-if="detail.pointsNum">
				<text class="">扣除积分数：</text>
				<text>-{{ detail.pointsNum }}</text>
			</view>

			<view class="p-20-0 d-e-c fb f34">
				实付金额：
				<!-- 付尾款 -->
				<text class="red" v-if="detail.status == 30">
					¥{{ detail.finalPrice }}
				</text>
				<!-- 付定金 -->
				<text class="red" v-else-if="detail.status == 10">
					¥{{ detail.depositPrice }}
				</text>
				<view v-else>
					<!-- <text class="red" v-if="detail.orderType == 4">
						<template v-if="
              detail.advance &&
              detail.advance.payStatus == 20 &&
              detail.payStatus == 10
            ">
							¥{{ detail.advance && detail.advance.payPrice }}
						</template>
						<template v-else-if="detail.payStatus == 20">
							¥{{
              parseFloat(detail.advance.payPrice) + parseFloat(detail.payPrice)
            }}
						</template>
						<template v-else-if="detail.payStatus == 10"> ¥0 </template>
					</text>
					<text class="red" v-else>¥ {{ detail.payPrice }}</text> -->
					<text class="red">¥ {{ detail.orderPrice }}</text>
				</view>
			</view>
		</view>
		<!-- 最新状态 -->
		<view class="foot-btns" style="gap:20rpx"
			v-if="(detail.orderType == 7 || detail.orderType == 8) && detail.groupStatus != 20 ? false : true">
			<button class="theme-borderbtn" v-if="detail.status == 10" @click="cancelOrder(detail.orderId)">
				取消订单
			</button>
			<block v-if="detail.billStatus == 10">
				<button class="theme-btn" @click="onPayOrder(detail.billId)">付款</button>
			</block>
		</view>
		<!-- 操作栏 -->
	</view>
</template>

<script>
import Popup from "@/components/uni-popup.vue";
import {
	pay
} from "@/common/pay.js";
export default {
	data() {
		return {
			customForm: "",
			/*是否加载完成*/
			loadding: true,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			/*是否显示支付类别弹窗*/
			isPayPopup: false,
			/*订单id*/
			orderId: 0,
			/*订单详情*/
			detail: {
				orderStatus: [],
				address: {
					region: [],
				},
				product: [],
				payType: 0,
				deliveryType: 0,
				payStatus: 0,
			},
			extractStore: {},
			/*是否显示拼团*/
			is_fightgroup: false,
			mchId: "",
			type: ''
		};
	},
	components: {
		Popup,
	},
	onLoad(e) {
		console.log(e, '链接信息')
		this.orderId = e.orderId;
		if (e.type) {
			this.type = e.type
			// 写入缓存
			uni.setStorageSync('shopUserCreateOrder',true)
			wx.login({
				success: res => {
					uni.setStorageSync('AuthCode', res.code);
					console.log(res, '微信登录返回')
				}
			})
		}
		this.getDataLink();
	},
	mounted() {
		// uni.showLoading({
		// 	title: "加载中",
		// });
	},
	onShow() {
		/*获取订单详情*/
		// this.getDataLink();
	},
	methods: {
		copyText(text) {
			let str = "";
			this.customForm.map((e) => {
				if (e.label !== "img") {
					str += e.title + e.value;
				}
			});
			uni.setClipboardData({
				data: str,
			});
		},
		nowOverTime(t) {
			let now = new Date().getTime();
			let time = new Date(t).getTime();
			return now >= time;
		},
		/*获取数据*/
		getDataLink() {
			let self = this;
			let orderId = self.orderId;
			self._get(
				"user/order/detail/new", {
				orderId: Number(orderId),
			},
				function (res) {
					console.log(res, '成功信息')
					self.detail = res.data;
					self.customForm = res.data.customForm;
					self.extractStore = res.data.extractStore;
					self.mchId = res.data.mchId;
					self.loadding = false;
					uni.hideLoading();
					// 判断是不是外连进入的
					if (self.type == 'shopUserCreateOrder' && self.detail.status != 10) {
						// 已经付款了 直接提示
						uni.showModal({
							title: '提示',
							content: '该订单已经支付，可打开订单列表进行查看。如有问题，请联系我们客服。',
							success: (res) => {
								if (res.confirm) {
									self.gotoPage('/orderpages/order/myorder')

								} else if (res.cancel) {
									self.gotoPage('/orderpages/order/myorder')
									// uni.switchTab({
									// 	url: '/orderpages/order/myorder' // 这里的url是你首页的路径
									// });
								}
							}
						});
					}
				},
				(err) => {
					console.log(err, '报错信息')
					uni.hideLoading();
					uni.navigateBack();
				}
			);
		},
		/*显示支付方式*/
		hidePopupFunc() {
			this.isPayPopup = false;
		},
		/*取消订单*/
		cancelOrder(e) {
			let self = this;
			let order_id = e;
			wx.showModal({
				title: "提示",
				content: "您确定要取消当前订单吗?",
				success: function (o) {
					if (o.confirm) {
						uni.showLoading({
							title: "正在处理",
						});
						self._post(
							"user/order/cancel", {
							orderId: order_id,
						},
							function (res) {
								uni.hideLoading();
								uni.showToast({
									title: "操作成功",
									duration: 2000,
									icon: "success",
								});
								self.getDataLink();
							}
						);
					}
				},
			});
		},

		// wxOrder(item) {
		// 	let self = this;
		// 	if (wx.openBusinessView) {
		// 		wx.openBusinessView({
		// 			businessType: "weappOrderConfirm",
		// 			extraData: {
		// 				merchant_id: self.mchId,
		// 				merchant_trade_no: item.tradeNo,
		// 				transaction_id: item.transactionId,
		// 			},
		// 			success() {
		// 				self._post(
		// 					"user/order/receipt", {
		// 					orderId: item.orderId,
		// 				},
		// 					function (res) {
		// 						uni.showToast({
		// 							title: res.msg,
		// 							duration: 2000,
		// 							icon: "success",
		// 						});
		// 						self.listData = [];
		// 						self.getDataLink();
		// 					}
		// 				);
		// 			},
		// 			fail() {
		// 				//dosomething
		// 			},
		// 			complete() {
		// 				//dosomething
		// 			},
		// 		});
		// 	} else {
		// 		//引导用户升级微信版本
		// 	}
		// },
		
		onSaveTable(tableId, orderProductId) {
			this.gotoPage(
				"/pluspage/plus/table/table?tableId=" +
				tableId +
				"&orderProductId=" +
				orderProductId
			);
		},
		

		/*支付方式选择*/
		onPayOrder(orderId) {
			let self = this;
			self.gotoPage("/orderpages/order/cashier?orderId=" + orderId);
		},
	},
};
</script>

<style scoped lang="scss">
.order-express {
	background: #ffffff;
	margin: 0 20rpx;
	border-radius: 12rpx;
	margin-top: 20rpx;
}

.order-express .icon-box .iconfont {
	font-size: 50rpx;
}

.order-datail {
	padding-bottom: 150rpx;
	background-color: #f2f2f2;
}

.order-datail .fight-users {
	margin: 0 auto;
}

.order-datail .fight-users .user-box {
	width: 80rpx;
	height: 80rpx;
	margin: 10rpx;
	border-radius: 50%;
	border: 1px dashed #cccccc;
}

.order-datail .fight-users {
	padding: 30rpx;
}

.order-datail .fight-users .user-box image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.order-datail .fight-users .user-box .leader {
	position: absolute;
	top: -20rpx;
	left: 50%;
	margin-left: -30rpx;
	width: 60rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 30rpx;
	border: 1px solid #ffffff;
	background: red;
}

.order-datail .fight-users .user-box.user-who {
	font-size: 50rpx;
	color: #999999;
}

.state-cont .countdown-datetime {
	margin-top: 16rpx;
}

.state-cont .countdown-datetime text {
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	background: rgba(0, 0, 0, 0.4);
}

.icon-dianpu1 {
	margin-right: 15rpx;
}

.kefu {
	border-top: 1rpx solid #cacaca;
	display: flex;
	justify-content: center;
	align-items: center;
}

.kefu .icon-kefu2 {
	color: #1296db;
	margin-right: 8rpx;
}

.group {
	margin: 0 20rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
}

.foot-btns button {
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
}

.supplement-box {
	margin-top: 20rpx;
	@include background_color("bg-tips");
	@include border_color("border_color");
	border: 1rpx solid;
	border-radius: 12rpx;
	line-height: 1.5;
}

.wrapper {
	background-color: #fff;
	margin: 0 20rpx;
	margin-top: 20rpx;
	padding: 30rpx;
}

.wrapper .acea-row {
	display: flex;
	flex-wrap: nowrap;
}

.wrapper .item {
	font-size: 28rpx;
	color: #282828;
}

.wrapper .item~.item {
	margin-top: 20rpx;
	white-space: normal;
	word-break: break-all;
	word-wrap: break-word;
}

.wrapper .item .conter {
	color: #868686;
	width: 480srpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.wrapper .item .conter .copy {
	font-size: 20rpx;
	color: #333;
	border-radius: 3rpx;
	border: 1rpx solid #666;
	padding: 3rpx 15rpx;
	margin-left: 24rpx;
	white-space: nowrap;
}

.wrapper .actualPay {
	border-top: 1rpx solid #eee;
	margin-top: 30rpx;
	padding-top: 30rpx;
	display: flex;
	align-items: center;

	.pay-people {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}

		.pay-nickname {
			margin-right: 20rpx;
			padding: 0 10rpx;
		}
	}
}

.wrapper .actualPay .money {
	font-weight: bold;
	font-size: 30rpx;
}

.acea-row.row-between {
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-o-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.upload .pictrue {
	display: inline-block;
	margin: 22rpx 17rpx 20rpx 0;
	width: 156rpx;
	height: 156rpx;
	color: #bbb;
}

.upload .pictrue image {
	width: 100%;
	height: 100%;
}

.copy-text {
	width: max-content;
	font-size: 10px;
	border-radius: 1px;
	border: 0.5px solid #666;
	padding: 1px 7px;
	margin-left: auto;
}
</style>